<template>

    <div>
        <!--            标题-->
        <el-row class=" border_bottom" type="flex" justify="start">
            <el-col :span="2">
                <h1>日志列表</h1>
            </el-col>
        </el-row>


        <el-row type="flex">
            <el-col justify="start">

                日期筛选      <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker> <el-button type="primary" plain @click="searchLogs">搜索</el-button>
            </el-col>





        </el-row>


        <el-row>
            <el-table
                    :data="logList"
                    style="width: 100%">
                <el-table-column
                        prop="logId"
                        label="ID"
                        width="380">
                </el-table-column>
                <el-table-column
                        prop="admin.adminName"
                        label="操作者"
                        width="380">
                </el-table-column>
                <el-table-column
                        prop="logTime"
                        label="操作时间"
                        width="380">
                </el-table-column>
                <el-table-column
                        prop="logEvent"
                        label="操作记录">
                </el-table-column>

            </el-table>

        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="count">
            </el-pagination>
        </el-row>

    </div>

</template>

<script>
    export default {
        name: "logManage",
        data(){
            return{
                value1: '',
                logList:[],
                count:null,
                pageSize:10,
            }
        },
        created() {
            // 请求列表

            this.$axios.post('/api/log/list?page=1&limit=10').then((res)=>{
                console.log(res);
                this.logList=res.data.data

                this.count=res.data.count
            })

        },

        methods:{
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                // 分页查询
                //发起请求
                this.$axios.post('/api/log/list?page='+val+'&limit='+this.pageSize).then((res)=>{
                    this.logList=Array.from(res.data.data)
                    console.log(`当前第 ${val}页数据：`);
                    console.log(this.logList);

                    this.count=res.data.count
                    console.log(res);

                })
            },
            searchLogs(){
                console.log(this.value1.length);
                if (this.value1.length==0) {
                    this.$axios.post('/api/log/list?page=1&limit=10').then((res)=>{
                        console.log(res);

                        this.logList=res.data.data
                        console.log(this.logList);
                        this.count=res.data.count
                    })

                }else{

                    console.log(this.transTime(this.value1));
                    this.$axios(
                        {
                            url:'/api/log/list',
                            method:'post',
                            params:this.transTime(this.value1)
                        }
                    ).then((res)=>{

                        this.logList=res.data.data
                        console.log(this.logList);
                        this.count=res.data.count

                    })
                }



            },
            transTime(timeArr){
                if (timeArr.length === 2) {

                    const time={
                        startTime:this.formatDate(timeArr[0]),
                        endTime:this.formatDate(timeArr[1])
                    }
                    return time
                }
            },
            formatDate (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                var minute = date.getMinutes();
                minute = minute < 10 ? ('0' + minute) : minute;
                var second= date.getSeconds();
                second = minute < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d+' '+h+':'+minute+':'+ second;
            },
        }
    }
</script>

<style scoped>

</style>